<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="全部产品"  left-arrow fixed @click-left="onClickLeft" class="header-nav" />
   <div class="header">
    <div><input type="text" class="search" placeholder="搜索"></div>
    <div class="header-search"><van-icon name="search" class="header-search-icon" /></div>
   </div>
   <!-- 最近使用的渲染 -->
   <h3 class="next-title">最近使用</h3>
   <!--最近使用 图标导航 -->
    <div class="nav-icon">
        <ul class="icons">
            <li>
                <img :src="require('../../assets/icons/house.svg')" alt="" class="house-img">
                <span>房贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/car.svg')" alt="" class="car-img">
                <span>车贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/bag.svg')" alt="" class="bag-img">
                <span>公积金</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/yes.svg')" alt="" class="yes-img">
                <span>保单贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/firm.svg')" alt="" class="firm-img">
                <span>企业贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/list.svg')" alt="" class="list-img">
                <span>社保贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/star.svg')" alt="" class="star-img">
                <span>社保贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/card.svg')" alt="" class="card-img">
                <span>信用卡</span>

            </li>

            <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

            </li>

        </ul>
    </div>

    <!-- 全部应用的渲染 -->
   <h3 class="next-title">全部应用</h3>
   <!--全部应用 图标导航 -->
    <div class="nav-icon">
            <ul class="icons">
              <li>
                <img :src="require('../../assets/icons/house.svg')" alt="" class="house-img">
                <span>房贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/car.svg')" alt="" class="car-img">
                <span>车贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/bag.svg')" alt="" class="bag-img">
                <span>公积金</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/yes.svg')" alt="" class="yes-img">
                <span>保单贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/firm.svg')" alt="" class="firm-img">
                <span>企业贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/list.svg')" alt="" class="list-img">
                <span>社保贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/star.svg')" alt="" class="star-img">
                <span>社保贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/card.svg')" alt="" class="card-img">
                <span>信用卡</span>

              </li>

              <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

              </li>
             <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

              </li>
             <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

              </li>
             <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

              </li>
             <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

              </li>
             <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

            </li>
            <li>
                <img :src="require('../../assets/icons/list.svg')" alt="" class="list-img">
                <span>社保贷</span>

              </li>

            </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  created () {},
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    }
  }
}
</script>

 <style lang="less" scoped>
 .header-nav{
     background-color: #f5f5f5;
 }

 /deep/ .van-nav-bar__arrow {
    min-width: 1em;
    margin-right: 4px;
    font-size: 23px !important;
}
// 搜索框
.search{
    width: 271px;
    height: 31px;

    text-indent: 11px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(229, 229, 229, 1);
    border-radius: 15px;
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    margin-left:20px;
}
.header-search{
  width: 30px;
  height: 30px;
  border-radius: 6px;

  text-align: center;
  background-color: #ccc;
  margin-left: 20px;
}
.header{
    margin-top:60px;
    display: flex;
}
.header-search-icon{
  color:#1989fa;
  font-size:22px;
  padding-top:5px;
}
.next-title{
    font-weight: 400;
    margin:15px 0 0 15px;
    font-size:14px;
}
// 最近使用下的图片样式
.nav-icon{

  width:340px;
  height:120px;
  text-align: center;
  background-color: #fff;
  margin: 10px 8px 0 15px;
  .icons{
    height:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li{
      width:43px;
      height:38px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 12px;
      color:#505050;
      margin:10px 0 0 20px;
      span{
        display: inline-block;
        width:47px;
        height:13px;
        margin-left:-10px;
      }

    }
  }
}
.house-img,.car-img,.bag-img,.yes-img,.firm-img,.peer-img,.star-img,.card-img,.list-img,.more-img{
  display: inline-block;
  width:23px;
  height:23px;
}
</style>
